<template>
  <div class="message-warp">
    <div class="title">{{ data.title }}</div>
    <div class="datetime">{{ data.create_time }}</div>
    <div class="addressee">收件人： {{ data.address_admin.name }}</div>
    <div class="info">{{ data.info }}</div>
    <div class="message">{{ data.text }}</div>
  </div>
</template>

<script>
import API from '@/api/system/message'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      data: {
        addressee: '',
        address_admin: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles',
      'userId'
    ])
  },
  created() {
    const id = this.$route.params.id
    API.getOne(id).then(response => {
      if (response.data.error_code === 888) {
        this.$alert('您请求的消息不存在', '错误', {
          confirmButtonText: '确定',
          callback: () => {
            this.backUrl()
          }
        })
      }
      this.data = response.data
      if (this.data.addressee === this.userId) {
        const statusData = {
          'status': 1,
          'id': this.$route.params.id
        }
        API.update(statusData)
      }
    })
  },
  methods: {
    confirmDel() {
      const id = this.data.id
      this.delOne(API, id, true)
    },
    save() {
      const thisData = this.data
      const thisForm = this.$refs.form
      this.update(API, thisData, thisForm)
    }
  }
}
</script>
<style>
.message-warp{
  width: 90%;
  margin: 0 auto;
}
.message-warp .datetime,.message-warp .info{margin:10px 0;}
.message-warp .datetime{
  font-size: 12px;
}
.message-warp .addressee{
  font-size: 14px;
}
.message-warp .info{
  font-size: 14px;
}
.message-warp .message{
  line-height: 150%;
}
</style>
